<template>
  <div class="binding-page privacy-page">
    <div class="setting-page-right-title">
      <div class="setting-right-name">
        <div class="setting-top-name">屏蔽公司</div>
        <div class="setting-bottom-line"></div>
      </div>
      <div class="setting-title-right" @click="addShieldCompany">
        <i class="el-icon-circle-plus"></i>
        添加屏蔽公司
      </div>
    </div>
    <div class="privacy-content">
      <div class="privacy-content-title">
        您已经屏蔽
        <span>2</span>个公司
      </div>
      <div class="privacy-company">
        <div class="privacy-company-list">
          武汉天芒云信息技术有限公司
          <el-button @click="closeShield">取消屏蔽</el-button>
        </div>
        <div class="privacy-company-list">
          武汉天芒云信息技术有限公司
          <el-button @click="closeShield">取消屏蔽</el-button>
        </div>
      </div>
    </div>
    <el-dialog title="添加屏蔽公司" :visible.sync="dialogVisible" width="30%">
      <span class="privacy-dialog-text">屏蔽后，您的简历将不会投递到该公司</span>

      <el-input placeholder="输入想屏蔽的公司" class="privacy-dialog-input" v-model="search">
        <el-button @click="searchCompany" slot="append" icon="el-icon-search"></el-button>
      </el-input>

      <div class="privacy-dialog-list">
        山东怀信环境科技有限公司
        <el-button @click="shieldCompany">屏蔽所选公司</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      search: ''
    }
  },
  methods: {
    addShieldCompany() {
      this.dialogVisible = true
    },
    shieldCompany() {
      //屏蔽某个公司
      console.log('屏蔽某个公司')
    },
    searchCompany() {
      //搜索公司
      console.log('搜索公司')
    },
    closeShield() {
      //取消屏蔽按钮
      console.log('取消屏蔽')
    }
  },
  components: {}
}
</script>

<style lang="scss" scoped>
</style>
